import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: {
        'SpeBox': (context) => SpeBox(),
      },
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new MyHomeState();
  }
}

class MyHomeState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
        appBar: new AppBar(
            // title: new Text(title),
            ),
        body: new MyhomeBox());
  }
}

/*
解释：第一个Row很简单，默认为居中对齐；
第二个Row，由于mainAxisSize值为MainAxisSize.min，Row的宽度等于两个Text的宽度和，所以对齐是无意义的，所以会从左往右显示；
第三个Row设置textDirection值为TextDirection.rtl，所以子widget会从右向左的顺序排列，
而此时MainAxisAlignment.end表示左对齐，所以最终显示结果就是图中第三行的样子；
第四个Row测试的是纵轴的对齐方式，由于两个子Text字体不一样，所以其高度也不同，
我们指定了verticalDirection值为VerticalDirection.up，即从低向顶排列，
而此时crossAxisAlignment值为CrossAxisAlignment.start表示底对齐。
*/
class MyhomeBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Container(
      width: double.infinity,
      height: double.infinity,
      color: Colors.greenAccent[50],
      child: new Column(
        //测试Row对齐方式，排除Column默认居中对齐的干扰
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          new Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Text('hello world '),
              new Text('I am Jack'),
            ],
          ),
          new Row(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              new Text('hello world'),
              new Text('I am Jack'),
            ],
          ),
          new Row(
            mainAxisAlignment: MainAxisAlignment.end,
            textDirection: TextDirection.rtl,
            children: <Widget>[
              new Text('hello world'),
              new Text('I am Jack'),
            ],
          ),
          new Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            verticalDirection: VerticalDirection.up,
            children: <Widget>[
              new Text(
                'hello world',
                style: TextStyle(fontSize: 30),
              ),
              new Text('I am Jack'),
            ],
          ),
          new RaisedButton(
            child: new Text(
              '特殊情况',
              style: TextStyle(fontSize: 20, color: Colors.blue),
            ),
            onPressed: () {
              Navigator.pushNamed(context, 'SpeBox');
            },
          )
        ],
      ),
    );
  }
}

class SpeBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('特殊情况'),
      ),
      body: new Container(
        color: Colors.green,
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.max, //有效，外层Colum高度为整个屏幕
            children: <Widget>[
              new Container(
                color: Colors.red,
                child: Column(
                  mainAxisSize: MainAxisSize.max, //无效，内层Colum高度为实际高度
                  children: <Widget>[
                    new Text('hellow Word'),
                    new Text('I am Jack'),
                  ],
                ),
              ),
              new RaisedButton(
                child: new Text(
                  '改进',
                  style: TextStyle(fontSize: 20, color: Colors.blue),
                ),
                onPressed: () {
                  Navigator.push(context,
                      new MaterialPageRoute(builder: (context) {
                    return new SpeBoxEx();
                  }));
                },
              )
            ],
          ),
        ),
      ),
    );
  }
}

class SpeBoxEx extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('改进'),
      ),
      body: new Container(
        color: Colors.green,
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.max, //有效，外层Colum高度为整个屏幕
            children: <Widget>[
              new Expanded(
                child: new Container(
                  color: Colors.red,
                  child: Column(
                    mainAxisSize: MainAxisSize.max, //无效，内层Colum高度为实际高度
                    children: <Widget>[
                      new Text('hellow Word'),
                      new Text('I am Jack'),
                    ],
                  ),
                ),
              ),
              new Text('解释：第一个Row很简单，默认为居中对齐；第二个Row，由于mainAxisSize值为MainAxisSize.min，Row的宽度等于两个Text的宽度和，所以对齐是无意义的，所以会从左往右显示；第三个Row设置textDirection值')
            ],
          ),
        ),
      ),
    );
  }
}
